<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Test: height:auto on region boxes laid out in a flex box</title>
    <style>
    /*<![CDATA[*/
#rA div, #rB div, #rC div, #article div {
    background: #a0a0a0;
    border: 1px solid #808080;
}


.flex {
    display: -webkit-flexbox;
    margin-bottom: 3em;
}

#rA, #rB, #rC{
    border: 1px solid #a0a0a0;
    background-color: #f0f0f0;
    height: auto;
    -webkit-flex: 1;
    margin: 10px;
    padding: 10px;
}

/*]]>*/
</style>
</head>
<body>
    <p>You should see three horizontal, light gray boxes of the same width and height,
        each containing a darker gray box. The center dark gray box is twice as high as the left
        one and the right dark gray box is three times as high as the left one.</p>
    <div class="flex">
       <div id="rA"><div style="width:50px;height:20px;"></div></div>
       <div id="rB"><div style="width:50px;height:40px;"></div></div>
       <div id="rC"><div style="width:50px;height:80px;"></div></div>
    </div>
</body>
</html>